import React from "react";
import './mine.scss'

export default function Cart() {
    const data = [
        {url: require('../../assets/img/1.jpg'), title: '学生认证'},
        {url: require('../../assets/img/2.jpg'), title: '企业团购'},
        {url: require('../../assets/img/3.jpg'), title: '兑换中心'},
        {url: require('../../assets/img/4.jpg'), title: '在线客服'},
        {url: require('../../assets/img/1.jpg'), title: '礼品卡'},
        {url: require('../../assets/img/2.jpg'), title: '完善信息'},
        {url: require('../../assets/img/3.jpg'), title: '我的地址'},
        {url: require('../../assets/img/4.jpg'), title: '更多'}
    ]

    const card = [
        {url: require('../../assets/img/card.jpeg'), title: '礼品卡1'},
        {url: require('../../assets/img/card.jpeg'), title: '礼品卡2'}
    ]
    const imgList = data.map((item, i) => (
        <li key={i}>
            <img src={item.url}/>
            <p>{item.title}</p>
        </li>
    ));
    const cardList = card.map((item, i) => (
        <div key={i} className='card-list'>
            <img src={item.url}/>
        </div>
    ));
    return (
        <div>
            <div className='mine-content'>
                <div className='mine-title'>我的功能</div>
                <div className="nav">
                    <ul>
                        {imgList}
                    </ul>
                </div>
            </div>
            <div className='mine-content'>
                <div className='mine-title'>礼品卡</div>
                <div className="nav">
                    <div className='card-img'>
                        {cardList}
                    </div>
                </div>
            </div>
        </div>
    )
}

